<template>
	<div>
		<el-form :inline="true">
			<el-form-item>
				<el-input v-model="searchForm.uid" placeholder="用户id" clearable> </el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="searchForm.user_name" placeholder="用户昵称" clearable> </el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="searchForm.call_no" placeholder="手机号" clearable> </el-input>
			</el-form-item>

			<el-form-item label="创建时间：" label-width="100">
				<el-date-picker
					v-model="searchForm.createTime"
					type="datetimerange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-DD HH:mm:ss"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button @click="getList" type="primary" icon="el-icon-search">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button @click="reloadList">重置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="addUpdateButton()" v-if="hasAuth('sys:tuser:add')"
					>新增</el-button
				>
			</el-form-item>
		</el-form>

		<el-table
			ref="multipleTable"
			:data="tableData"
			tooltip-effect="dark"
			style="width: 100%"
			border
			stripe
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" align="center" fixed="left"> </el-table-column>
			<el-table-column prop="uid" align="center" label="用户id"> </el-table-column>
			<el-table-column prop="user_name" label="用户昵称" align="center"> </el-table-column>
			<el-table-column prop="call_no" label="手机号" align="center"> </el-table-column>
			<el-table-column label="用户头像" align="center">
				<template slot-scope="scope">
					<el-avatar size="small" :src="scope.row.picture"></el-avatar>
				</template>
			</el-table-column>
			<el-table-column prop="gmt_create" align="center" label="创建时间">
				<template slot-scope="scope">
					{{ formatTime(scope.row.gmt_create) }}
				</template>
			</el-table-column>
			<el-table-column prop="creator" label="创建人" align="center"> </el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button
						type="primary"
						v-if="hasAuth('sys:tuser:list:module')"
						@click="showSetModule(scope.row)"
						>分配模块</el-button
					>

					<el-button
						type="primary"
						plain
						@click="addUpdateButton(scope.row.id)"
						v-if="hasAuth('sys:tuser:edit')"
						>编辑</el-button
					>
					<el-button
						type="primary"
						plain
						@click="addUpdateButton(scope.row.id, 'editPs')"
						v-if="hasAuth('sys:tuser:edit')"
						>重置密码</el-button
					>
					<!--el-button
						type="primary"
						v-if="hasAuth('sys:tuser:list:details')"
						@click="showProductListModal(scope.row)"
						>详情</el-button
					>
					<el-button
						type="primary"
						v-if="hasAuth('sys:tuser:list:send')"
						@click="showSendProductModal(scope.row)"
						>赠送套餐</el-button
					-->
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			layout="total, sizes, prev, pager, next, jumper"
			:page-sizes="[10, 20, 50, 100]"
			:current-page="current"
			:page-size="size"
			:total="total"
		>
		</el-pagination>
		<SendProduct ref="sendProduct" v-if="sendProductVisible" @refreshDataList="getList"></SendProduct>
		<ProductList ref="productList" v-if="productListVisible" />
		<AddUpdate ref="addUpdate" v-if="addUpdateVisible" @refreshDataList="getList"></AddUpdate>
<el-drawer
  title="设置模块"
  :visible.sync="setModuleVisible"
  :size="1100"
:custom-class="$style.drawer"
  direction="rtl">
		<SetModule ref="setModuleRef"></SetModule>
</el-drawer>
	</div>
</template>

<script>
import dayjs from 'dayjs';
import SendProduct from './sendProduct';
import ProductList from './productList';
import AddUpdate from './AddUpdate.vue';
import SetModule from './SetModule.vue';
import { appList } from '../../components/data.ts';
export default {
	name: 'Tuser',
	components: {
		SendProduct,
		ProductList,
		AddUpdate,
		SetModule,
	},
	data() {
		return {
			searchForm: {},
			delBtlStatu: true,
			total: 0,
			size: 10,
			current: 1,
			multipleSelection: [],
			vegetablesType: [],
			addUpdateVegetablesvisible: false,
			takeDownVegetablesvisible: false,
			tableData: [],
			farmList: [],
			loading: false,
			sendProductVisible: false,
			productListVisible: false,
			appList,
			deviceTypeList: [
				{ value: '', label: '全部' },
				{ value: 'ANDROID', label: 'ANDROID' },
				{ value: 'IOS', label: 'IOS' },
				{ value: 'WEB', label: 'WEB' },
				{ value: 'H5', label: 'H5' },
				{ value: 'UNKNOWN', label: '未知设备' },
			],
			addUpdateVisible: false,
			setModuleVisible: false,
		};
	},
	created() {
		this.getList();
	},
	methods: {
		reloadList() {
			this.searchForm = {};
			this.getList();
		},
		showProductListModal(item) {
			this.productListVisible = true;
			this.$nextTick(() => {
				this.$refs.productList.init(item);
			});
		},
		showSendProductModal(item) {
			this.sendProductVisible = true;
			this.$nextTick(() => {
				this.$refs.sendProduct.init(item);
			});
		},
		formatTime(time) {
			const localTime = dayjs(time).format('YYYY-MM-DD HH:mm:ss');
			// 使用Day.js将时间转换成当前时区的时间
			return localTime;
		},
		toggleSelection(rows) {
			if (rows) {
				rows.forEach((row) => {
					this.$refs.multipleTable.toggleRowSelection(row);
				});
			} else {
				this.$refs.multipleTable.clearSelection();
			}
		},
		handleSelectionChange(val) {
			console.log('勾选');
			console.log(val);
			this.multipleSelection = val;

			this.delBtlStatu = val.length == 0;
		},

		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size = val;
			this.getList();
		},
		handleCurrentChange(val) {
			console.log(`当前页 ${val}`);
			this.current = val;
			this.getList();
		},
		getList() {
			var startTime = undefined;
			var endTime = undefined;
			const sendData = {};
			if (this.searchForm.createTime != undefined) {
				startTime = this.searchForm.createTime[0];
				endTime = this.searchForm.createTime[1];
				startTime = dayjs(startTime).toISOString();
				endTime = dayjs(endTime).toISOString();
				sendData.startTime = startTime;
				sendData.endTime = endTime;
			}
			const searchForm = this.searchForm;

			sendData.user_name = searchForm.user_name;
			sendData.uid = searchForm.uid;
			sendData.call_no = searchForm.call_no;

			sendData.size = this.size;
			sendData.current = this.current;

			this.$axios({
				methods: 'get',
				url: '/admin/tuser/search', 
				params: sendData,
			})
				.then((res) => {
					// 其余的代码
					const {result} = res;
					this.tableData = result.records;
					this.size = result.size;
					this.current = result.current;
					this.total = result.total;
				})
				.catch((error) => {
					console.error('发生请求错误：', error);
				});
		},
		delHandle(id) {
			var ids = [];
			if (id) {
				ids.push(id);
			} else {
				this.multipleSelection.forEach((row) => {
					ids.push(row.id);
				});
			}
			console.log(ids);

			this.$axios.post('/admin/vegetables/delete', ids).then((res) => {
				this.$message({
					showClose: true,
					message: '恭喜你，操作成功',
					type: 'success',
					onClose: () => {
						this.getVegetablesList();
					},
				});
			});
		},
		addUpdateButton(id, type) {
			this.addUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addUpdate.init(id, type);
			});
		},

		showSetModule(id){
			this.setModuleVisible = true;
			this.$nextTick(() => {
				this.$refs.setModuleRef.init(id);
			});
		}
	},
};
</script>

<style scoped>
.el-button {
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	margin-right: 10px;
}
</style>
<style module>
.drawer{
	width: 600px;
}
</style>
